<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mamma</title>

<link rel="shortcut icon" href="../image/icon_mamma.ico">
<link rel="stylesheet" href="../js/jquery-ui-1.11.1.custom/jquery-ui.min.css">
<link href="../css/babyInfo/babyChart.css" rel="stylesheet" type="text/css">

<script src="../js/jquery-2.1.1.js"></script>
<script	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('#btn').on('click', formSubmit);
	$('select option[value=<s:property value="list[0].babynum" />]').attr('selected', true);
	var date = $('#datepicker').val();
	baby(<s:property value='list[0].babynum' />, date);
	profileMenu();
	$("#datepicker").datepicker({
	    dateFormat: 'yy-mm-dd',
	    prevText: '이전 달',
	    nextText: '다음 달',
	    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
	    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
	    dayNames: ['일','월','화','수','목','금','토'],
	    dayNamesShort: ['일','월','화','수','목','금','토'],
	    dayNamesMin: ['일','월','화','수','목','금','토'],
	    showMonthAfterYear: true,
	    yearSuffix: '년'
		, onSelect: function(dateText) {
				var babynum = $("select option:selected").attr('value');
				if(babynum == -1) return;
				$('#babynum').attr('value', babynum);
				baby(babynum, dateText);
			}
	  });
});

function profileMenu() {
	$('div.info').click(function(){
		$('#profileMenu').toggle();	
	});
	
	$('#chartMenu div.button i').on('click', function(){
		$('#chartMenu div.chartMenu').slideToggle();
	});
}

function baby(babynum, date) {
	$.ajax({
		url: '../baby/listBabyData.action',
		type: 'POST',
		dataType: 'json',
		data: {babynum: babynum, inputdate: date},
		success: output
	});	
}

function formSubmit(){
	var babynum = $("select option:selected").attr('value');
	if(babynum == -1) return;
	
	var suyu = $('#suyu').val();
	var sobyun = $('#sobyun').val();
	var play = $('#play').val();
	var inputdate = $('#inputdate').val();
	
	var suyuamount = $('#suyuamount').val();
	var liyusik = $('#liyusik').val();
	var bochaegi = $('#bochaegi').val();
	var ungga = $('#ungga').val();
	var sleeptime = $('#sleeptime').val();
	var diapers = $('#diapers').val();
	var starttime1 = $('#starttime1').val()*1;
	var starttime2 = $('#starttime2').val()*1;
	var starttime = starttime1 + starttime2;
	
	if (starttime < 10) {
		var temp = 0;
		var starttime = temp+"" + starttime+"";
	}
	
 	var memo = $('#memo').val();
	
	$('#suyu').val('');
	$('#sobyun').val('');
	$('#play').val('');
	$('#inputdate').val('');
	
	$('#suyuamount').val('');
	$('#liyusik').val('');
	$('#bochaegi').val('');
	$('#ungga').val('');
	$('#sleeptime').val('');
	$('#diapers').val('');
	$('#starttime').val('');
	
	$('#memo').val('');
	
	$.ajax({
		url: '../baby/insertBabyData.action',
		type: 'POST',
		dataType: 'json',
		data: {babynum: babynum, inputdate: inputdate, suyu: suyu, sobyun: sobyun, play: play, suyuamount: suyuamount, liyusik: liyusik,
			bochaegi: bochaegi, ungga:ungga, sleeptime:sleeptime, diapers:diapers, starttime:starttime, memo:memo, babynum: babynum
		},	
		success: function(){
			baby(babynum);
		}
	});
}

function output(json){
	var infoVo = json.babyData;
	$('#suyu_sum').text(infoVo.suyu+"회")
	$('#suyuamount_sum').text(infoVo.suyuamount+"ml");
	$('#liyusik_sum').text(infoVo.liyusik+"회");
	$('#play_sum').text(infoVo.play+"회");
	$('#bochaegi_sum').text(infoVo.bochaegi+"회");
	$('#sleeptime_sum').text(infoVo.sleeptime+"시간");
	$('#ungga_sum').text(infoVo.ungga+"회");
	$('#sobyun_sum').text(infoVo.sobyun+"회");
	$('#diapers_sum').text(infoVo.diapers+'회');
	
	$('body, html').animate({
		scrollTop: '500px'
	});
}
</script>
<style type="text/css">
#chartMenu {
	width: 100px;
	height: 300px;
	margin-top: 30px; margin-left: 1204px;
	position: absolute;
}
#chartMenu a:LINK{ color: black; }
#chartMenu a{ text-decoration: none; }
#chartMenu a:VISITED{ color: black; }
#chartMenu i.fa-bars {
	color: white;
	font-size: 30pt;
	margin-left: 30px;
	cursor: pointer;
}
#chartMenu .chartMenu{
	position: absolute;
	width: 100px;
	height: 170px;
	background-color: white;
	margin-top: 10px;
	display: none;
	border: 1px solid lightgray;
}
#chartMenu ul li {
	font-size: 9pt;
	list-style: none;
	width: 80px; height: 30px;
	margin-left: -40px; margin-top: 10px;
	padding-bottom: 5px; padding-top: 5px;
	padding-left: 10px; padding-right: 10px;
}
#chartMenu ul li:hover {
	background-color: #FF5459;
	color: white;
	cursor: pointer;
}
#chartMenu ul li.selected_menu {
	background-color: #FF5459;
	color: white;
}
</style>
</head>
<body>
	<jsp:include page="../account/header.jsp" />
	<!-- 데이터 입력 -->
	<div class="wrap">
	
		<div id="chartMenu">
			<div class="button"><i class="fa fa-bars"></i></div>
			<div class="chartMenu">
				<ul>
					<a href="../baby/goBabyInfo.action?email=<s:property value='email' />">
						<li><i class="fa fa-line-chart"></i> 성장 그래프</li>
					</a>
					<li class="selected_menu"><i class="fa fa-pie-chart"></i> 데일리 차트</li>
					<a href=""><li><i class="fa fa-history"></i> 히스토리</li></a>
				</ul>
			</div>
		</div>
		
		<div class="top">
			<div class="title">
				<img src="../image/babyInfo/title.png" alt="오늘 우리아기에게 무슨일이?" />
			</div>
		</div>

		<div class="con_wrap">

			<div id="main">
				<div class="con_top">

					<!-- 입력 -->
					<div class="baby_form">
						<div class="form_bar">
							<div class="form_bar_tit">아기이름</div>
							<div class="form_bar_value">
								<select id="babySelect" class="name_search">
									<option value="-1">아기선택</option>
									<s:iterator value="list">
										<option value="<s:property value='babynum' />"><s:property value='name' /></option>
									</s:iterator>
								</select>
							</div>
						</div>
						<div class="form_bar">
							<div class="form_bar_tit">날짜</div>
							<div class="form_bar_value">
								<input type="date" class="form_bar_input" id="inputdate" />
							</div>
						</div>
						<div class="form_bar ampm">
							<div class="form_bar_tit">오전/오후</div>
							<div class="form_bar_value">
								<select name="starttime1" id="starttime1">
									<option value="0">오전</option>
									<option value="12">오후</option>
								</select>
								<select name="starttime2" id="starttime2">
									<s:iterator begin="1" end="12" value="count" var="count">
										<option value="${count}">${count}</option>
									</s:iterator>
								</select>
							</div>
						</div>
						<div class="form_bar2">
							<div class="form_bar_tit">수유횟수</div>
							<div class="form_bar_value">
								<input type="text" class="form_bar_input2" id="suyu" />
							</div>
						</div>
						<div class="form_bar2">
							<div class="form_bar_tit">총 수유량</div>
							<div class="form_bar_value">
								<input type="text" class="form_bar_input2" id="suyuamount" />
							</div>
						</div>
						<div class="form_bar2">
							<div class="form_bar_tit">이유식횟수</div>
							<div class="form_bar_value">
								<input type="text" class="form_bar_input2" id="liyusik" />
							</div>
						</div>
						<div class="form_bar2">
							<div class="form_bar_tit">놀이활동횟수</div>
							<div class="form_bar_value">
								<input type="text" class="form_bar_input2" id="play" />
							</div>
						</div>
						<div class="form_bar2">
							<div class="form_bar_tit">보챈횟수</div>
							<div class="form_bar_value">
								<input type="text" class="form_bar_input2" id="bochaegi" />
							</div>
						</div>
						<div class="form_bar2">
							<div class="form_bar_tit">수면시간</div>
							<div class="form_bar_value">
								<input type="text" class="form_bar_input2" id="sleeptime" />
							</div>
						</div>
						<div class="form_bar2">
							<div class="form_bar_tit">대변횟수</div>
							<div class="form_bar_value">
								<input type="text" class="form_bar_input2" id="ungga" />
							</div>
						</div>
						<div class="form_bar2">
							<div class="form_bar_tit">소변횟수</div>
							<div class="form_bar_value">
								<input type="text" class="form_bar_input2" id="sobyun" />
							</div>
						</div>
						<div class="form_bar2">
							<div class="form_bar_tit">기저귀교체횟수</div>
							<div class="form_bar_value">
								<input type="text" class="form_bar_input2" id="diapers" />
							</div>
						</div>
						<!-- 버튼 -->
						<div class="btn_enter">
							<button type="button" id="btn" class="btn_style">
								<label for="btn"><i class="fa fa-check-square-o"></i> 입력하기</label>
							</button>
						</div>
						<!-- //버튼 끝 -->

					</div>
					<!-- //입력 끝 -->

					<div class="memo">
						<s:textarea id="memo" name="" placeholder="메모를 입력하세요" />
					</div>
				</div>

				<!-- 아기하루 전체출력 -->

				<div class="baby_con">
					<div class="s_tit">
						<img src="../image/babyInfo/s_tit.png" alt="오늘 우리아기에게 무슨일이?" />
					</div>
					<input type="text" id="datepicker" placeholder="날짜를 선택해 주세요">

					<div class="baby_list">
						<div class="bar01 mg_r37">
							<div class="baby_list_tit">수유횟수</div>
							<div class="baby_list_value" id="suyu_sum">회</div>
						</div>
						<div class="bar01 mg_r37">
							<div class="baby_list_tit">총 수유량</div>
							<div class="baby_list_value" id="suyuamount_sum">ml</div>
						</div>
						<div class="bar01">
							<div class="baby_list_tit">이유식횟수</div>
							<div class="baby_list_value" id="liyusik_sum">회</div>
						</div>
						<div class="bar01 mg_r37">
							<div class="baby_list_tit">놀이활동 횟수</div>
							<div class="baby_list_value" id="play_sum">회</div>
						</div>
						<div class="bar01 mg_r37">
							<div class="baby_list_tit">보챈횟수</div>
							<div class="baby_list_value" id="bochaegi_sum">회</div>
						</div>
						<div class="bar01">
							<div class="baby_list_tit">수면시간</div>
							<div class="baby_list_value" id="sleeptime_sum">회</div>
						</div>
						<div class="bar01 mg_r37">
							<div class="baby_list_tit">대변횟수</div>
							<div class="baby_list_value" id="ungga_sum">회</div>
						</div>
						<div class="bar01 mg_r37">
							<div class="baby_list_tit">소변횟수</div>
							<div class="baby_list_value" id="sobyun_sum">회</div>
						</div>
						<div class="bar01">
							<div class="baby_list_tit">기저귀교체횟수</div>
							<div class="baby_list_value" id="diapers_sum">회</div>
						</div>
					</div>
				</div>
				<div class="bottom2">
					<img src="../image/babyInfo/grow_con_bg.png">
				</div>
				<!-- baby_con -->
				<div class="bottom"></div>
			</div>
			<!-- main -->
		</div>
	</div>
</body>
</html>